//自定义DOM覆盖物 - 继承DOMOverlay
export function MyLabel(options) {
    TMap.DOMOverlay.call(this, options);
}

MyLabel.prototype = new TMap.DOMOverlay();
 
// 初始化
MyLabel.prototype.onInit = function(options) {
    this.position = options.position;
    this.content = options.content;
	this.left = options.left || 15;
	this.top = options.top || -22;
};
 
// 创建DOM元素，返回一个DOMElement
MyLabel.prototype.createDOM = function() {
    var mydom = document.createElement("div");
    //设置DOM样式
    mydom.style.cssText = 'height:20px;max-width:200px;padding:2px 5px;color:#000;background:#fecf9f;border:#fecf9f solid 1px;'+
	'line-height:15px;font-size:12px;position:absolute;top:0px;left:0px;border-radius:7px;';
    mydom.innerHTML=this.content;
    return mydom;
};
 
// 更新DOM元素，在地图移动/缩放后执行
MyLabel.prototype.updateDOM = function() {
    if (!this.map) {
        return;
    }
 
    // 经纬度坐标转容器像素坐标
    let pixel = this.map.projectToContainer(this.position);
 
    //默认使用DOM左上角作为坐标焦点进行绘制（左上对齐）
    //如想以DOM中心点（横向&垂直居中）或其它位置为焦点，可结合this.dom.clientWidth和this.dom.clientHeight自行计算
    let left = pixel.getX() + this.left + 'px';
    let top = pixel.getY() + this.top + 'px';
     
    //将平面坐标转为三维空间坐标
    this.dom.style.transform = `translate3d(${left}, ${top}, 0px)`;
};